import React, { Component } from 'react';
import './base.scss';
class Com extends Component {
  constructor (props) {
    super(props)
    this.state = {
      rating: '',
      activeClass: 'rating-star'
    }
  }
  componentDidMount () {
    let rating = this.props.rating; // 0-10
    let classStr = '';
    if (rating < 0) {
      rating = 0;
    } else if (rating < 1) {
      classStr = 'rating-star allstar0';
    } else if (rating < 2) {
      classStr = 'rating-star allstar5';
    } else if (rating < 3 ){
      classStr = 'rating-star allstar10';
    } else if (rating < 4 ){
      classStr = 'rating-star allstar15';
    } else if (rating < 5 ){
      classStr = 'rating-star allstar20';
    } else if (rating < 6 ){
      classStr = 'rating-star allstar25';
    } else if (rating < 7 ){
      classStr = 'rating-star allstar30';
    } else if (rating < 8 ){
      classStr = 'rating-star allstar35';
    } else if (rating < 9 ){
      classStr = 'rating-star allstar40';
    } else if (rating < 10 ){
      classStr = 'rating-star allstar45';
    } else {
       classStr = 'rating-star allstar50';
       rating = 10
    }
    this.setState({
      rating,
      activeClass: classStr
    })
  }
  render () {
    if (!this.props.rating || this.props.rating < 0) {
      return (
        <div className = "stars">
          <span >暂无评分</span>
        </div>
      )
    } else {
      return (
        <div className = "stars">
          <span className = { this.state.activeClass }></span>
          <span className = "subject-rate">{ this.state.rating }</span>
        </div>
      )
    }
    
  }
}

export default Com;
